<%-- 
    Document   : index
    Created on : 2011-07-30, 22:03:29
    Author     : Maxime
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%;padding: 0px; margin: 0px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"> </script>
        <script type="text/javascript" >
        
            function changeBody(){               
                b();
                a();     
            }
            
            function a(){
                $('#body_part').attr('src', 'http://maximedupaul.com');
                $('#body_part')[0].contentWindow.location.reload(true); 
                return false;
            }
            
            function b(){
                $('#side_menu').width('0%');
                $('#body_size').width('100%');
            }
            
            function c(){
                $('#side_menu').width('25%');
                $('#body_size').width('75%');
            }
            
            function d(){
                $('#body_part').attr('src', 'http://www.w3schools.com/');
                $('#body_part')[0].contentWindow.location.reload(true); 
                return false;
            }
 
        
        </script>
    </head>

    <body style="height: 100%; background-color: black;padding: 0px; margin: 0px">

        <table style="width: 100%; height: 100%;padding: 0px; margin: 0px; border-style: none">
            <tr>
                <td  style="background-color: red; text-align: center; width: 100%; height: 40px"><button style="height: 100%" onclick="b()"> HIDE </button> <button style="height: 100%" onclick="c()"> SHOW </button> </td>                
            </tr>    
            <tr style="height: 100%">
                <td style="width: 100%;height: 100%">
                    <div  id="side_menu" style="background-color: aqua; text-align: center ; width: 25%; height: 100%; float: left">
                        Side Menu 
                    </div>               

                    <div id="body_size" style="text-align: center ;vertical-align: middle; width: 75%; height: 100%; float: left">
                        <iframe id="body_part" src="http://www.w3schools.com/" style="width: 100%; height: 100%; padding: 0px; margin: 0px">

                        </iframe> 
                    </div>
                </td>
            </tr>
        </table>

    </body>
</html>
